<!-- 黑名单管理 -->
<template>
  <div class="ky-container">
    <div @click="closeRight">
      <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg">
        <el-form ref="form" :model="formData" :inline="true" class="ky-form-inline ky-form-inline-sm" label-width="80px">
          <el-form-item label="医院名称:" prop="hospitalCode">
            <el-select size="small" class="param-type_input" filterable v-model="formData.hospitalCode" placeholder="请选择">
              <el-option
                v-for="(item,index) in mx_hospitalList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="患者姓名:" prop="patName">
            <el-input prefix-icon="el-icon-search" v-model="formData.patName" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="患者ID号:" prop="patientId">
            <el-input prefix-icon="el-icon-search" v-model="formData.patientId" placeholder="请输入内容"></el-input>
          </el-form-item>
          <!--  <el-form-item label="手机号:" prop="hospitalCode">
            <el-input prefix-icon="el-icon-search" v-model="formData.patientName" placeholder="请输入内容"></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" class="m-l-0" size="small" icon="el-icon-search" @click="search">查询</el-button>
            <el-button class="m-l-0" size="small" @click="resetParam" plain>重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
        <div class="title-box">
          <div class="content-title">
            <span style="margin-right:10px">黑名单管理</span>
            <el-button size="small" type="primary" icon="el-icon-plus" @click.stop="addBlickClick">手动添加</el-button>
          </div>
          <!-- <div class="text-bule" @click.stop="blackSettingClick"><i class="el-icon-setting icon"></i>黑名单规则配置</div> -->
        </div>
        <el-table
          ref="table"
          v-loading="loading"
          size="medium"
          :data="tableData"
          style="width: 100%"
          class="ky-table"
          border
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column align="left" prop="operate" label="操作" width="210px" fixed="left">
            <template slot-scope="scope">
              <div class="flex flex-row justify-center text-center">
                <el-button :disabled="scope.row.status !== 1" size="small" icon="el-icon-edit" type="primary" @click.stop="liftingBan(scope.row)">手动解禁</el-button>
                <el-button type="danger" size="small" icon="el-icon-delete" @click.stop="deleteItem(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="55" fixed="left"></el-table-column>
          <el-table-column align="left" prop="hospitalCode" label="医院名称" show-overflow-tooltip :formatter="frtHospCode" width="160px"></el-table-column>
          <el-table-column align="left" prop="patName" label="患者姓名" width="84px"></el-table-column>
          <el-table-column align="left" prop="patientId" label="患者ID号" width="142px" show-overflow-tooltip></el-table-column>
          <!--  <el-table-column align="left" prop="patientName" label="手机号"></el-table-column> -->
          <el-table-column align="left" prop="appointmentType" label="预约来源"></el-table-column>
          <el-table-column align="left" prop="banDesc" label="封禁说明" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" prop="addType" label="来源"></el-table-column>
          <el-table-column align="left" prop="status" label="黑名单状态" :formatter="fmtStatus" width="105px">
            <template slot-scope="scope">
              <span :class="scope.row.status === 1 ? 'red-color':'green-color'">{{scope.row.status === 1 ? '封禁':'解禁'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="createUser" label="创建人"></el-table-column>
          <el-table-column align="left" prop="createTime" label="创建时间" width="185px"></el-table-column>
          <el-table-column align="left" prop="openDate" label="黑名单解禁日期" width="170px"></el-table-column>
          <el-table-column align="left" prop="openUser" label="解禁人"></el-table-column>
          <el-table-column align="left" prop="openTime" label="解禁操作时间" width="165px"></el-table-column>
        </el-table>
        <paginationCont
          :total="totalCount"
          :page.sync="currentPage"
          :limit.sync="pageSize"
          @pagination="changePagenation"
        />
      </el-card>
      <transition name="fade-form" mode="out-in">
        <div :class="{'toolBox-small':device !== 'mobile' && sidebar.opened,'toolBox-midul' :device !== 'mobile' && !sidebar.opened,'toolBox-large' :device == 'mobile','toolBox':true}" v-show="showToolBox">
          <div>
            <i class="el-icon-info icon blue-color"></i>
            <span class="toolBox-text">已选择<span class="blue-color">{{multipleSelection.length}}</span>项</span>
            <span class="cancle-click" @click="cancleChoose">取消选择</span>
          </div>
          <div>
            <el-button type="primary" size="small" v-show="isShowLiftBanButton" @click="batchLiftingBan">批量解禁</el-button>
            <el-button type="danger" size="small" @click="batchDeleteItem">批量删除</el-button>
          </div>
        </div>
      </transition>
    </div>
    <blacklist-setting :hospital-code="formData.hospitalCode" :dialog-visible.sync="dialogVisible"></blacklist-setting>
    <add-black-dialog :add-visible.sync="addVisible" :hospital-code="formData.hospitalCode" @refresh="search"></add-black-dialog>
  </div>
</template>

<script>
import { getBlackListPage, openBlackList, deleteBlackList } from '@/api/api.js'
import paginationCont from '@/components/Pagination/index'
import blacklistSetting from './blacklistSetting.vue'
import addBlackDialog from './addBlackList.vue'
export default {
  name: '',
  mixins: [],
  components: { paginationCont, blacklistSetting, addBlackDialog },
  data() {
    return {
      formData: {
        hospitalCode: this.$store.state.user.hospitalCode,
        patName: '',
        patientId: ''
      },
      dialogVisible: false,
      addVisible: false,
      tableData: [],
      loading: false,
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      showToolBox: false,
      multipleSelection: [],
      isShowLiftBanButton: false
    }
  },
  watch: {
    multipleSelection(val) {
      if (val && val.length > 1) {
        this.showToolBox = true
        this.isShowLiftBanButton = true
        val.forEach(v => {
          if (v.status !== 1) { // 已解禁状态
            this.isShowLiftBanButton = false
          }
        })
      } else {
        this.showToolBox = false
      }
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    }
  },
  created() {

  },
  mounted() {
    this.$getHospitalList()
    this.formData.hospitalCode = this.$store.state.user.hospitalCode
    this.search()
  },
  methods: {
    closeRight() {
      this.dialogVisible = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    cancleChoose() {
      // 取消选择
      this.multipleSelection = []
      this.$refs.table.clearSelection()
    },
    liftingBan(row) {
      /* 手动解禁 */
      this.$confirm('此操作将手动解禁该患者, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.liftingBanData(row)
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消解禁'
          })
        })
    },
    deleteItem(row) {
      // 删除
      this.$confirm('此操作将该患者从黑名单中删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData(row)
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    batchLiftingBan() {
      /* 批量解禁 */
      let confirmMsg = '此操作将永久批量解禁该选中患者, 是否继续?'
      this.$confirm(confirmMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let successNum = 0
        let faliNum = 0
        for (let v of this.multipleSelection) {
          let data = {
            id: v.id,
            hospitalCode: v.hospitalCode
          }
          await openBlackList(data).then(res => {
            if (res && res.code === 10000) {
              successNum++
            } else {
              faliNum++
            }
          })
        }
        this.fetchData()
        this.$message.success(`已经成功解禁` + successNum + '条,失败' + faliNum + '条')
        this.cancleChoose()
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    batchDeleteItem() {
      /* 批量删除 */
      let confirmMsg = '此操作将永久批量删除该选中患者, 是否继续?'
      this.$confirm(confirmMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let successNum = 0
        let faliNum = 0
        for (let v of this.multipleSelection) {
          let data = {
            id: v.id,
            hospitalCode: v.hospitalCode
          }
          await deleteBlackList(data).then(res => {
            if (res && res.code === 10000) {
              successNum++
            } else {
              faliNum++
            }
          })
        }
        this.fetchData()
        this.$message.success(`已经成功删除` + successNum + '条,失败' + faliNum + '条')
        this.cancleChoose()
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    liftingBanData(row) {
      // 解禁接口
      openBlackList({ id: row.id, hospitalCode: row.hospitalCode }).then(res => {
        if (res && res.code === 10000) {
          this.$message.success('解禁成功')
          this.fetchData()
        }
      })
    },
    deleteData(row) {
      // 删除
      deleteBlackList({ id: row.id, hospitalCode: row.hospitalCode }).then(res => {
        if (res && res.code === 10000) {
          this.$message.success('删除成功')
          this.fetchData()
        }
      })
    },
    resetParam() {
      // 重置
      this.formData = {
        hospitalCode: this.$store.state.user.hospitalCode,
        patName: '',
        patientId: ''
      }
    //   this.search()
    },
    search() {
      // 查询
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.currentPage = 1
          this.fetchData()
        }
      })
    },
    changePagenation() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.fetchData()
        }
      })
    },
    fetchData() {
      this.loading = true
      let data = {
        ...this.formData,
        pageSize: this.pageSize, // 页面大小
        pageNumber: this.currentPage // 页码
      }
      getBlackListPage(data).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tableData = res.content.list
          this.totalCount = res.content.totalCount
        }
      }).catch(() => {
        this.loading = false
      })
    },
    blackSettingClick() {
      this.dialogVisible = true
    },
    addBlickClick() {
      this.addVisible = true
    },
    frtHospCode(row, column, cellValue, index) {
      let name = ''
      let hospIndex = this.mx_hospitalList.findIndex(item => item.code === cellValue)
      if (hospIndex !== -1) {
        name = this.mx_hospitalList[hospIndex].name
      }
      return name
    },
    fmtStatus(row, column, cellValue, index) {
      if (cellValue === 1) {
        return '封禁'
      } else {
        return '解禁'
      }
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.ky-container{
    .title-box{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .content-title{
            margin-left:4px;
            padding: 8px 0px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
        }

    }
    .click-button{
        width: 125px;
    }
    .toolBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #E5E7EC;
        padding: 12px 28px;
        position: fixed;
        bottom: 0;
        background: #fff;
        z-index: 10;
        margin-left: -20px;
        .toolBox-text{
            margin-left: 8px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            span{
                margin:0 4px;
            }
        }
        .cancle-click{
            cursor: pointer;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #919398;
            margin-left: 32px;
        }
  }
  .toolBox-small{
      width: calc(100% - 210px);
  }
  .toolBox-midul{
      width: calc(100% - 54px);
  }
  .toolBox-large{
      width: 100%
  }
  .text-bule{
      color:#00c0ef;
      cursor: pointer;
  }
  .icon{
    margin-right: 4px;
  }
}
.ky-form-inline-sm .el-form-item /deep/ .el-input__inner{
    width: 220px;
}
.red-color{
    color:#e35151
}
.green-color{
    color:#429d62
}
.icon{
    margin-right: 4px;
  }
  .blue-color{
      color:#0093FF
  }
</style>
